<template>
    <div id="apply-invoices">
        <!-- 申请开发票首页 -->
        <div class="deposit-content">
            <div class="top-bg">
                <van-nav-bar class="header" fixed :border="false" @click-left="diffBack">
                        <div class="left"
                            slot="left">
                            <van-icon name="arrow-left"
                                    size="24px"
                                    color="#fff" />
                        </div>
                        <div class="title"
                            slot="title">{{title}}</div>
                    </van-nav-bar>
            </div>
            <div class="reset-wrapper">
                <div class="reset-content">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh"> 
                        <van-list
                            :loading="loading"
                            :finished="finished"
                            finished-text="没有更多了"
                            @load="onLoad"
                            class="list-box"
                        >
                            <van-radio-group v-model="resultC">
                                <van-radio
                                    v-for="(item, index) in list"
                                    :key="index"
                                    :name="item.orderUid"
                                    style="margin-bottom: 0.24rem;"
                                >
                                    <div slot="icon" class="icontit">
                                        <i class="van-icon van-icon-success"></i>
                                    </div>
                                    <div class="tabs bgwrite" style="width: 6.31rem;">
                                        <div class="tab fz5">
                                            <div class="invoice-case">
                                                <div class="header-case">   
                                                    <div class="left-case">{{item.orderName}}</div>
                                                    <div class="right-case">
                                                        <div class="status-case">
                                                            <span>已完成</span>
                                                        </div>
                                                        <!-- <div class="icon-case">
                                                            <img src="@/assets/img/designer/personalCenter/rightarrow.png" alt="">
                                                        </div> -->
                                                    </div>
                                                </div>
                                                <div class="reset-case">
                                                    <div class="mid-case">
                                                        <div class="left-case">
                                                            <div class="key-case">作图数量</div>
                                                            <div class="value-case">{{item.plotNum}}张</div>
                                                        </div>
                                                    </div>
                                                    <div class="foot-case">
                                                        <div class="left-case">
                                                            <div class="key-case">完成日期</div>
                                                            <div class="value-case">{{item.finishDate}}</div>
                                                        </div>
                                                        <div class="right-case">
                                                            <div class="key-case">总计</div>
                                                            <div class="value-case"> <span>{{item.money}}</span>元</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </van-radio>
                            </van-radio-group>
                        </van-list>
                    </van-pull-refresh>
                </div>
            </div>
            <div class="btn-case bgwrite" v-if="list.length>0">
                <div class="active-btn" v-if="resultC" @click="invoiceDetails">下一步</div>
                <div class="disable-btn" v-if="!resultC">下一步</div>
            </div>
      </div>
    </div>
</template>
<script>
import Vue from 'vue'
import { Dialog } from 'vant';
Vue.use(Dialog);
import { mapMutations, mapState} from "vuex";
import {getuserUid} from '@/utils/auth.js'
export default {
  components: {
  },
  watch: {
  },
  data() {
    return {
      title: '选择开具发票订单',
      resultC: '',
      list: [],
      loading: false,
      isLoading: false,
      finished: false,
      pageNum: 0,
      pageSize: 4,
      oladParams: {},
      isShow: false
    }
  },
  created() {},
  methods: {
    diffBack(){
        this.$router.push('/designer/personalCenter')
    },
    // 发票列表
    async requestList(params, cb) {
      this.oladParams = params
      try {
            let responseList = await HTTP('invoiceOrderList', params)                
            if(responseList.code !== 200){
                this.$toast(responseList.msg || '服务器异常')
                return
            }
            let res = responseList.data.list.map(e => {
                return {
                    ...e
                }
            })
            cb && cb(res)
        } catch (error) {
            this.$toast('数据开小差了')
            cb && cb()
        }
    },
    onRefresh(){
        this.isLoading = true
        this.loading = true
        this.pageNum = 1
        this.requestList({...this.oladParams, pageNum: 1}, (data) => {
            this.list = data
            // 太慢了不差半秒，太快需要延时（因为用户在滑动的时候有心理准备，速度太快了反而担心这是假的）
            setTimeout(() => {
                this.isLoading = false
                this.loading = false
                // 因为是刷新，所以，这个是执行onLoad，进入onLoad之后会进行list的loading的修改状态，从而重新进入onLoad
                this.onLoad()
            }, 500)
        })
    },
    onLoad(){
        this.loading = true
        this.pageNum += 1
        let params = {
            userUid: getuserUid(),
            pageNum: this.pageNum,
            pageSize: this.pageSize,
        }
        setTimeout(() => {
            this.requestList(params, (data) => {
                this.loading = false
                if(params.pageNum === 1){
                    this.list = data
                }else{
                    this.list.push(...data)
                }
                if(data && data.length === 0){
                    this.finished = true
                } else if (this.list.length==0) {
                    this.isShow = true
                    this.finished = false
                }
            })
        }, 0)
    },
    invoiceDetails() {
        // 每张发票详情
        const _self  = this
        _self.setInvoiceId(_self.resultC)
        _self.list.forEach((item)=>{
            if(item.orderUid == _self.resultC) {
                _self.setInvoiceMoney(item.money)
            }
        })
        _self.$router.push('/designer/eachInvoice')
    },
    ...mapMutations(["setInvoiceId", "setInvoiceMoney"])
  }
};
</script>
<style lang="scss" scoped>
#apply-invoices {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F9F9F9;
    p{
        margin-bottom: 0.3rem!important;
    }
    .deposit-content{
        position: relative;
        width: 100%;
        height: 100%;
        .top-bg{
            width: 100%;
            background: #fff;
            border-bottom-left-radius: 0.5rem;
            border-bottom-right-radius: 0.5rem;
            .header {
                background: #5E8EFE;
                color: #ffffff;
                height: 0.92rem;
                .title {
                    color: #ffffff;
                    font-size: 0.35rem;
                    }
            }
        }
        .reset-wrapper{
            position: fixed;
            width: 100%;
            top: 0.92rem;
            left: 0;
            right: 0;
            overflow-y: scroll;
            bottom: 1.6rem;
            .reset-content{
                width: 100%;
                padding: 0.24rem;
                box-sizing: border-box;
                border-radius: 0.1rem;
                .icontit {
                    display: flex;
                    align-items: center;
                    .title {
                        margin-left: 0.15rem;
                    }
                }
                .tabs{
                    box-shadow: 0 0.02rem 0.08rem 0.04rem rgba(216,216,216,0.5);
                    border-radius: 0.1rem;
                    .tab{
                        width: 100%;
                        box-sizing: border-box;
                        padding: 0.3rem  0.24rem;
                        .invoice-case{
                            width: 100%;
                            .header-case{
                                width: 100%;
                                margin-bottom: 0.3rem;
                                div{
                                    display: inline-block;
                                }
                                .left-case{
                                    width: 70%;
                                    height: 0.4rem;
                                    overflow:hidden;
                                    text-overflow:ellipsis;
                                    white-space:nowrap;
                                    color: #282828;
                                    font-size: 0.36rem;
                                    font-family: PingFangSC-Semibold;
                                    font-weight: 600;
                                    line-height: 0.4rem;
                                }
                                .right-case{
                                    width: 30%;
                                    height: 0.4rem;
                                    text-align: right;
                                    vertical-align: top;
                                    div{
                                        height: 0.4rem;
                                        line-height: 0.4rem;
                                    }
                                    .status-case{
                                        height: 0.4rem;
                                        line-height: 0.4rem;
                                        vertical-align: top;
                                        color: #959595;
                                        font-size: 0.28rem;
                                        font-family: PingFangSC-Regular;
                                        font-weight: 400;
                                    }
                                    .icon-case{
                                        position: relative;
                                        height: 0.4rem;
                                        width: 0.14rem;
                                        img{
                                            position: absolute;
                                            left: 0;
                                            top: 0.07rem;
                                            line-height: 0.4rem;
                                            height: 0.26rem;
                                            width: 0.14rem;
                                            
                                        }
                                    }
                                }
                            }
                            .reset-case{
                                .mid-case{
                                    margin-bottom: 0.3rem;
                                    .left-case{
                                        div{
                                            display: inline-block;
                                            height: 0.3rem;
                                            line-height: 0.3rem;
                                            font-family: PingFangSC-Regular;
                                            font-weight: 400;
                                        }
                                        .key-case{
                                            color: #959595;
                                            font-family: PingFangSC-Regular;
                                            font-weight: 400;
                                            font-size: 0.3rem;
                                            margin-right: 0.2rem;
                                        }
                                        .value-case{
                                            color: #282828;
                                            font-size: 0.3rem;
                                        }
                                    }
                                }
                                .foot-case{
                                    width: 100%;
                                    .left-case{
                                        display: inline-block;
                                        width: 70%;
                                        div{
                                            display: inline-block;
                                            height: 0.3rem;
                                            line-height: 0.3rem;
                                            font-family: PingFangSC-Regular;
                                            font-weight: 400;
                                        }
                                        .key-case{
                                            color: #959595;
                                            font-family: PingFangSC-Regular;
                                            font-weight: 400;
                                            font-size: 0.3rem;
                                            margin-right: 0.2rem;
                                        }
                                        .value-case{
                                            color: #282828;
                                            font-size: 0.3rem;
                                        }
                                    }
                                    .right-case{
                                        display: inline-block;
                                        text-align: right;
                                        width: 30%;
                                        div{
                                            display: inline-block;
                                            color: #D8D8D8;
                                            font-family: PingFangSC-Regular;
                                            font-weight: 400;
                                            font-size: 0.2rem;
                                        }
                                        .value-case{
                                            span{
                                                color: #282828;
                                                font-size: 0.36rem;
                                                font-family: PingFangSC-Semibold;
                                               font-weight: 600;
                                                margin: 0 0.05rem;
                                            }
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            }
        }
        .btn-case{
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1.6rem;
            box-sizing: border-box;
            box-shadow:0px 2px 8px 4px rgba(216,216,216,0.5);
            padding: 0.36rem;
            div{
                width: 100%;
                border-radius: 0.1rem;
                height: 0.88rem;
                line-height: 0.88rem;
                text-align: center;
                font-size: 0.26rem;
                font-family: PingFangSC-Semibold;
                font-weight: 600;
                color: #fff;
            }
            .active-btn{
                background: #5E8EFE; 
            }
            .disable-btn{
                background: #DFE8FF;

            }
        }
    }
}
</style>
